<template>
  <div id="examination" style="height: 1000px;">
    <a-table
      :columns="columns"
      :data-source="data"
      :row-key="record => record.key"
      :pagination="false"
    >
      <template slot="add" slot-scope="text, record,index,column">
        <!-- <a-icon v-if="!text" type="plus-square" @click="handleAdd(index,column)" /> -->
        <a-checkbox :checked="!!text" @change="(e)=>handleChecked(e,index,column,text)" />
        <template v-if="text">
          <span style="margin-left: 10px;">{{ text }}</span>
        </template>
      </template>
    </a-table>
    <drawerDemo
      :RenderId="'examination'"
      :visible="visible"
      :onClose="onClose"
      :onSuccess="onSuccess"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="是否选中">
          <a-checkbox v-model="checked" />
        </a-form-item>
        <template v-if="checked">
          <a-form-item label="指定类别">
            <a-radio-group v-decorator="['radiogroup']">
              <a-radio
                v-for="item in radioData"
                :key="item.key"
                :value="item.value"
              >{{ item.label }}</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="人员/角色">
            <a-select mode="tags" v-decorator="['selectValue']" :options="Selectoptions" />
          </a-form-item>
        </template>
      </a-form>
    </drawerDemo>
  </div>
</template>
<script>
import drawerDemo from './drawerDemo'
export default {
  props: [],
  data() {
    return {
      checkedIndex: [],
      type: '',
      checked: false,
      radioData: [
        {
          key: '1',
          value: '1',
          label: '指定人',
        },
        {
          key: '2',
          value: '2',
          label: '指定角色',
        },
      ],

      Selectoptions: [],

      form: this.$form.createForm(this, {
        name: 'coordinated',
        onValuesChange: (props, values, allValues) => {
          const { radiogroup } = allValues
          if (radiogroup === '1') {
            this.Selectoptions = [
              {
                value: '0',
                label: '张十三',
              },
              {
                value: '1',
                label: '李十四',
              },
            ]
          } else {
            this.Selectoptions = [
              {
                value: '3',
                label: '角色1',
              },
              {
                value: '4',
                label: '角色2',
              },
              {
                value: '5',
                label: '角色3',
              },
              {
                value: '6',
                label: '角色4',
              },
            ]
          }
        },
      }),
      visible: false,
      columns: [
        {
          title: '分公司',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '模型名称',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '分公司初审',
          dataIndex: 'address1',
          key: 'address1',
          scopedSlots: { customRender: 'add' },
          isChecked: false,
        },
        {
          title: '分公司终审',
          dataIndex: 'address2',
          key: 'address2',
          scopedSlots: { customRender: 'add' },
          isChecked: false,
        },
        {
          title: '总公司初审',
          dataIndex: 'address3',
          key: 'address3',
          scopedSlots: { customRender: 'add' },
          isChecked: false,
        },
        {
          title: '总公司终审',
          dataIndex: 'address4',
          key: 'address4',
          scopedSlots: { customRender: 'add' },
          isChecked: false,
        },
      ],
      data: [
        {
          key: '1',
          name: '上海分公司',
          age: '限制报价',
        },
        {
          key: '2',
          name: '北京分公司',
          age: '限制报价',
        },
      ],
    }
  },
  components: { drawerDemo },
  created() {},
  computed: {},
  methods: {
    checkeds(index, column) {
      return this.checkedIndex.includes(index) && column.isChecked ? true : this.checkedIndex.includes(index)
    },

    handleCheckeds() {},

    handleChecked(e, index, column, text) {
      const checked = e.target.checked
      this.datas = {
        index,
        dataIndex: column.dataIndex,
      }
      console.log(checked, 'checked')
      if (!checked) {
        this.handleEdit(text, index, column)
      } else {
        this.visible = true
      }
    },
    onClose() {
      this.form.resetFields()
      this.checked = false
      this.visible = false
    },
    onSuccess() {
      if (!this.checked) {
        this.handleDelete(this.datas.index, this.datas.dataIndex)
      } else {
        const value = Object.values(this.form.getFieldsValue())
        const keys = this.radioData.find((item) => item.value === value[0]).label
        const values = this.Selectoptions.filter((item) => value[1].includes(item.value))
          .map((ele) => ele.label)
          .join('|')
        const text = `${keys}:${values}`
        this.data = this.data.map((item, index) => {
          if (index === this.datas.index) {
            item[this.datas.dataIndex] = text
          }
          return item
        })
      }
      this.onClose()
    },
    handleEdit(text, index, column) {
      // this.datas = {
      //   index,
      //   dataIndex: column.dataIndex,
      // }
      this.type = 'edit'
      const values = text.split(':')
      const keys = this.radioData.find((item) => item.label === values[0]).value
      const values1 = this.Selectoptions.filter((item) => values[1].split('|').includes(item.label)).map((ele) => ele.value)
      this.form.setFieldsValue({
        radiogroup: keys,
        selectValue: values1,
      })
      this.visible = true
      this.form.setFieldsValue({
        radiogroup: keys,
        selectValue: values1,
      })
      this.visible = true
    },
    handleDelete(index, dataIndex) {
      this.data = this.data.map((item, i) => {
        if (i === index) {
          item[dataIndex] = ''
        }
        return item
      })
    },
  },
}
</script>
<style lang="scss" scoped>
</style>
